<template>
  <div class="productionCenter">
    <div class="df-page-list">
      <n-spin :show="loading">
        <Home
          v-if="machine && shiftData"
          :machine="machine"
          :shift-data="shiftData"
          :distributeInfo="distributeInfo"
          :isElectron="isElectron"
        />

        <n-card v-else-if="isElectron" :bordered="false" class="pro-card">
          <n-button v-if="machine && !shiftData" type="primary" @click="openShiftChangeDialogFn">
            {{ $t('productionCenter.table.chooseReportWorker') }}
          </n-button>

          <n-empty v-if="!machine" :description="$t('productionCenter.table.macTips')">
            <template #icon>
              <img src="@/assets/svg/empty.svg" />
            </template>
          </n-empty>
        </n-card>

        <n-card v-else :bordered="false" class="pro-card">
          <n-button type="primary" @click="openChooseMachineDialogFn">
            {{ $t('productionCenter.table.chooseMachine') }}
          </n-button>
        </n-card>
      </n-spin>
    </div>

    <ShiftChange ref="shiftChangeRef" :shift-list="shiftList" @set-shift-data-fn="setShiftDataFn" />

    <ChooseMachine
      ref="chooseMachineRef"
      :machine="machine"
      :machineList="machineList"
      @setChooseMachineCodeFn="setChooseMachineCodeFn"
    />
  </div>
</template>

<script setup lang="ts">
  import { listShift } from '@render/api/base/shift';
  import Home from './components/Home.vue';
  import lang from './lang';
  import ShiftChange from './components/ShiftChange.vue';
  import { useProjectSettingStore } from '@/store/modules/projectSetting';
  import { useMixins } from '@/hooks/useMixins';
  import { storage } from '@/utils/Storage';
  import { infoDistributeByMachineCode } from '@render/api/gather/distribute';
  import ChooseMachine from './components/ChooseMachine.vue';
  import { listMachine } from '@/api/base/machine';
  import { useWsStore } from '@/store/modules/ws';

  const { loadLangFn } = useMixins();

  const wsStore = useWsStore();

  loadLangFn(lang);

  const projectStore = useProjectSettingStore();

  const { mac, machineData, defaultDistributeData, isElectron } = projectStore;

  const factoryChildName = projectStore.factoryChildName;

  provide('factoryChildName', factoryChildName);

  const adjustingOptions = isElectron ? null : null;

  provide('adjustingOptions', adjustingOptions);

  const loading = ref(false);

  const machine = ref(machineData);

  provide('machineData', machine);

  const shiftList = ref([]);

  const shiftData = ref(storage.get('shiftData', null));

  const shiftChangeRef = ref(null);

  const chooseMachineRef = ref(null);

  // 注入数据
  const eventData: any = inject('eventData');
  // 修改数据
  if (isElectron) {
    eventData.shiftFn = openShiftChangeDialogFn;
  } else {
    eventData.machineFn = openChooseMachineDialogFn;
  }

  eventData.shiftData = shiftData.value;

  eventData.machine = machine.value;

  const distributeInfo = ref(null);

  async function initFn() {
    loading.value = true;

    const [list2, res] = await Promise.all([
      listShift(),
      ...(defaultDistributeData
        ? []
        : [infoDistributeByMachineCode({ machineCode: machineData.machineCode })]),
    ]);

    console.log(res);

    if (res.data) {
      distributeInfo.value = res.data;
    }

    shiftList.value = list2.data;

    eventData.shiftList = list2.data;

    loading.value = false;

    if (!shiftData.value && machine.value) {
      nextTick(() => {
        openShiftChangeDialogFn();
      });
    }
  }

  const machineList = ref([]);

  if (mac && machineData) {
    initFn();
  } else if (!isElectron) {
    Promise.all([listMachine(), listShift()]).then((res) => {
      const [list1, list2] = res;

      machineList.value = list1?.data || [];

      shiftList.value = list2.data;

      eventData.shiftList = list2.data;

      loading.value = false;

      nextTick(() => {
        openChooseMachineDialogFn();
      });
    });
  }

  function openShiftChangeDialogFn() {
    if (shiftChangeRef && shiftChangeRef.value && shiftChangeRef.value.openModalFn)
      shiftChangeRef.value.openModalFn();
  }

  function openChooseMachineDialogFn() {
    if (chooseMachineRef && chooseMachineRef.value && chooseMachineRef.value.openModalFn)
      chooseMachineRef.value.openModalFn();
  }

  function setShiftDataFn(val, fn) {
    storage.set('shiftData', val);

    shiftData.value = val;

    eventData.shiftData = shiftData.value;

    fn && fn();
  }

  function setChooseMachineCodeFn(val, fn) {
    if (val && val.machineCode) {
      const { machineCodeObj } = wsStore;

      if (
        machineCodeObj &&
        machineCodeObj[val.machineCode] &&
        machineCodeObj[val.machineCode].shiftData
      ) {
        const obj = machineList.value.find((item) => item.machineCode === val.machineCode);

        machine.value = obj;

        shiftData.value = machineCodeObj[val.machineCode].shiftData;

        eventData.machine = obj;

        eventData.shiftData = machineCodeObj[val.machineCode].shiftData;
      }
    }

    fn && fn();
  }

  onBeforeUnmount(() => {
    eventData.machine = null;

    eventData.shiftData = null;

    eventData.machineFn = null;

    eventData.shiftFn = null;
  });
</script>

<style lang="less" scoped>
  .df-page-list {
    min-height: calc(100vh - 130px);
    .pro-card {
      border-radius: 4px;
      min-height: calc(100vh - 130px);

      :deep(.n-card__content) {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
</style>
